<template>
  <Nav>
    {{ $t('box.token.nav') }}
  </Nav>
  <div class="page-vote">
    <div class="content">
      <div class="box" >
        <div class="item" v-for="item in data.list">
          <div class="token">
            <img src="@/assets/box/token.png" class="animate__updownMin animate__animated animate__infinite animate__slow">
            <div class="asset" @click="asset.open(item.id)">{{ $t('box.token.asset') }}</div>
          </div>
        </div>
      </div>
      <div class="page">
        <md-activity-indicator v-if="data.loading" type="carousel" color="#5d62a7" :size="15"></md-activity-indicator>
      </div>
      <div class="box" v-if="!data.loading && data.list.length == 0">
        <span>{{ $t('page.empty') }}</span>
      </div>
    </div>
  </div>
  <Asset ref="asset" />
</template>

<script setup>
import { ref } from 'vue'
import { list } from '@/api/box'
import { toast, dialog } from '@/style'
import { t } from '@/lang'
import Nav from '@/components/nav.vue'
import Asset from './asset.vue'

const asset = ref(null)

const data = ref({ 
  list: [],
  loading: true
})

const get = () => {
  data.value.loading = true
  list().then(res => {
    data.value.list.push(...res.data)
  }).finally(() => {
    data.value.loading = false
  })
}

get()
</script>

<style lang="scss" scoped>
  .page-vote{
    min-height: 100%;
    background: url('@/assets/page.jpg') center center no-repeat;
    background-size: cover;
    background-attachment:fixed;

    .content{
      padding: 130px 20px 0;
    }

    .page{
      padding: 20px;
      display: flex;
      align-items: center;
      flex-direction: column;

      .md-button.link{
        color: #5d62a7;
      }
    }

    .box{
      display: flex;
      flex-wrap: wrap;

      span{
        width: 100%;
        color: #5d62a7;
        font-size: 14px;
        line-height: 100px;
        text-align: center; 
        display:block;
      }

      .item{
        width: 33.33%;
        padding: 10px;
        box-sizing: border-box;

        .token{
          border-radius: 10px;
          background-image: linear-gradient(to left, #1f235e, #1d0f5e);
          overflow: hidden;

          img{
            width: 50px;
            display: block;
            margin: 0 auto;
            padding: 20px;
          }

          .asset{
            background: #5d62a7;
            color: #fff;
            font-size: 14px;
            text-align: center;
            padding: 5px 0;  
          }
        }
      }
      
    }
  }
</style>